<template>
  <div :class="['sign_box', 'sign_box_' + isDisabled]" :style="style" @click="handleSign">
    <!-- 有签名 -->
    <div v-if="vValue" class="box_item">
      <img :src="vValue" style="width: auto; height: 100px" />
      <img
        v-if="!isDisabled && vValue && isDelete"
        class="delete_signature"
        src="@/assets/image/icon_Delete.png"
        @click.stop="deleteSignature"
      />
    </div>
    <!-- 没有签名 -->
    <div v-else class="box_item">
      <i class="iconfont icon-File"></i>
      <span> Click to add signature </span>
    </div>
  </div>
  <sign-dialog ref="signDialogRef" v-bind="attrs" @getSign="getSign" />
</template>
<script setup>
import _ from 'lodash';
const attrs = useAttrs();
import SignDialog from './SignDialog.vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  prop: {
    type: String,
    default: '',
  },
  style: {
    type: Object,
    default: () => ({}),
  },
  row: {
    // form信息或者table行信息
    type: Object,
    default() {
      return {};
    },
  },
  isDelete: {
    // 签名是否可删除
    type: Boolean,
    default: false,
  },
});

const signDialogRef = ref();

const emits = defineEmits(['update:modelValue', 'itemEvent']);

const vValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits('update:modelValue', val);
  },
});

// 是否禁用
const isDisabled = computed(() => {
  const { disabledFn, disabled } = attrs;
  return disabledFn && _.isFunction(disabledFn) ? disabledFn(attrs) : disabled || false;
});

// 点击签名
function handleSign() {
  if (isDisabled.value) return;
  // 签名弹框
  signDialogRef.value.init(vValue.value, props.row);
}

// 获取签名
function getSign(val, res) {
  if (res) {
    vValue.value = res.imgBase64 || '';
  } else {
    vValue.value = '';
  }
  emits('itemEvent', { eventName: 'change', prop: props.prop, row: val, signInfo: res });
}

// 删除签名
function deleteSignature() {
  vValue.value = '';
  emits('itemEvent', { eventName: 'change', prop: props.prop, row: {} });
}
</script>
<style lang="scss" scoped>
.sign_box {
  width: 280px;
  height: 100px;
  border-radius: 2px;
  border: 1px dashed #dddddd;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}
.sign_box_true {
  background-color: var(--el-disabled-bg-color);
  cursor: not-allowed;
}
.box_item {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  i {
    font-size: 20px;
    position: relative;
    top: 2px;
  }
  i,
  span {
    color: var(--el-color-primary);
  }
  .delete_signature {
    position: absolute;
    cursor: pointer;
    right: 5px;
    top: 5px;
  }
}
</style>
